<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<link rel="stylesheet" href="css/bootstrap.min.css" />
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<style type="text/css">
#drugAlter {
	width: 300px;
}
</style>
<script type="text/javascript">
	//盛放 省份信息的 json对象数组
	var provices = [ {
		pid : 1001,
		pname : "河南省"
	}, {
		pid : 1002,
		pname : "河北省"
	} ];
	//盛放 城市信息的 json对象数组
	var cities = [ {
		pid : 1001,
		cid : 100101,
		cname : "郑州市"
	}, {
		pid : 1001,
		cid : 100102,
		cname : "开封市"
	}, {
		pid : 1002,
		cid : 100201,
		cname : "石家庄"
	}, {
		pid : 1002,
		cid : 100202,
		cname : "保定市"
	} ];
	//页面加载完成后, 自动 添加 省份 下拉框信息
	 window.onload = function() {
		var provinceSelect = document.getElementById("province");//定位获取 省份 下拉框对象
		for (var i = 0; i < provices.length; i++) {
			var optionProvice = new Option(provices[i].pname, provices[i].pid); // 构建一个 省份的 下拉项
			provinceSelect.appendChild(optionProvice);//向 省份下拉框中的末尾追加 一个 省份 下拉项<option>
		}
		var pid = provinceSelect.value; // 获取 页面加载完成后,默认选中的 省份 的 id编号
		//alert(pid);
		addCities(pid);

	};
	//用户 点选 省份下拉框, 改变下拉框的值时,触发 该函数, 更新 城市下拉框信息
	function updateCities() {
		var provinceSelect = document.getElementById("province");
		var pid = provinceSelect.value;
		//alert("更改后的 省份id:"+pid);
		document.getElementById("city").innerHTML = ""; //每次改变 省份, 更新城市列表时, 先将原先的 城市选项 清空
		addCities(pid);

	}
	// 封装函数, 将 根据省份ID 筛选 省市信息, 并 动态 添加城市 下拉项的 代码块 封装成一个独立模块
	function addCities(pid) {
		var citySelect = document.getElementById("city");//定位获取城市 下拉框对象
		//筛选出 默认选中的 省份 相关联的 城市
		for (var j = 0; j < cities.length; j++) {
			if (cities[j].pid == pid) { // 循环 城市json对象数组时, 判断 当前 所循环到的某个 城市json对象 的省份id属性值 是否 为当前选择的省份id
				var optionCity = new Option(cities[j].cname, cities[j].cid); // 构建一个 城市 的下拉项
				citySelect.appendChild(optionCity);//向 城市下拉框中的末尾追加 一个 城市 下拉项<option>
			}
		}
	} 
	
</script>
</head>
<body>

	
	<select id="province" onchange="updateCities();">

	</select>
	<select id="city">

	</select>
	<!-- <h1>药品 修改 页面</h1> -->
	<%-- <div id="drugAlter">
		<form class="form-horizontal" action="getPet" method="post">
			<div class="form-group">
				<label for="drid" class="col-sm-2 control-label">ID</label>
				<div class="col-sm-10">
					<input type="test" class="form-control" name="drid" id="drid"
						value="${drug.drid }" placeholder="清输入新名称">
				</div>
			</div>
			<div class="form-group">
				<label for="drname" class="col-sm-2 control-label">药名</label>
				<div class="col-sm-10">
					<input type="textarea" class="form-control" name="drname"
						value="${drug.drname }" id="drname" placeholder="清输入药名">
				</div>
			</div>
			<div class="form-group">
				<label for="drprice" class="col-sm-2 control-label">价格</label>
				<div class="col-sm-10">
					<input type="test" class="form-control" name="drprice" id="drprice"
						value="${drug.drprice }" placeholder="清输入新年龄">
				</div>
			</div>
			<div class="form-group">
				<label for="drnum" class="col-sm-2 control-label">库存</label>
				<div class="col-sm-10">
					<input type="test" class="form-control" name="drnum" id="drnum"
						value="${drug.drnum }" placeholder="清输入新年龄">
				</div>
			</div>
			<div class="form-group">
				<label for="drstart" class="col-sm-2 control-label">生产日期</label>
				<div class="col-sm-10">
					<input type="test" class="form-control" name="drstart" id="drstart"
						value="${drug.drstart }" placeholder="清输入新年龄">
				</div>
			</div>
			<div class="form-group">
				<label for="drstop" class="col-sm-2 control-label">过期日期</label>
				<div class="col-sm-10">
					<input type="test" class="form-control" name="drstop" id="drstop"
						value="${drug.drstop }" placeholder="清输入新年龄">
				</div>
			</div>



			<div class="form-group">
				<label for="petYiMiao" class="col-sm-2 control-label">种类</label>
				<div class="col-sm-10" id="petYiMiao">
					<select name="type.tid" class="form-control">
						<option value="1"">感冒类</option>
						<option value="2">消炎解毒类</option>
						<option value="3">维生素类</option>
						<option value="4">小儿科类</option>
						<option value="5">消化类</option>
						<option value="6">中成药类</option>
						<option value="7">外用类</option>

					</select>
				</div>
			</div>
			<div class="form-group">
				<label for="type" class="col-sm-2 control-label">供货商</label>
				<div class="col-sm-10" id="type">
					<select name="supp.pid" class="form-control">
						<option value="1">遵义市意通医药有限责任公司</option>
						<option value="2">贵州鼎圣药业有限公司</option>
						<option value="3">铜仁梵天药业有限公司</option>
						<option value="4">国药控股贵州有限公司</option>
						<option value="5">广西梧州制药(集团)股份有限公司</option>
						<option value="6">飞利浦医疗</option>
						<option value="7">罗氏诊断</option>
						<option value="8">西门子</option>
						<option value="9">美敦力</option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<button type="button" class="btn btn-info">修改</button>
				</div>
			</div>
		</form>
	</div> --%>
</body>
</html>